<template>
  <el-col class="base-table">
    <el-row style="margin-bottom:20px">
      <el-col :span="24">
        <div class="block" style="float:left">
          <el-date-picker
            v-model="reachVal"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['08:00:00']">
          </el-date-picker>
        </div>
        <div class="block">
          <el-button style="margin-left:20px;font-size:20px" type="primary" @click="handleReach(reachVal)" size="small" icon="el-icon-search" title="查询"></el-button>
          <!-- <el-button style="font-size:20px" type="primary" @click="handleUpload" size="small" icon="el-icon-upload" title="导出"></el-button>         -->
          <el-button style="font-size:20px" type="primary" @click="handlePrinte" size="small" icon="el-icon-printer" title="打印"></el-button>
        </div>
      </el-col>
    </el-row>
    <div id="allTable">
      <el-table ref="qyTable1" border :empty-text='empty' :data="tableData1" tooltip-effect="dark" style="width: 50%;float:left">
        <el-table-column prop="xianqu" label="县市区名" header-align="center"></el-table-column>
        <el-table-column prop="stnm" label="站名" header-align="center"></el-table-column>
        <el-table-column prop="xiangzhen" label="乡镇名" header-align="center"></el-table-column>
        <el-table-column prop="amount" label="累计雨量" header-align="center"></el-table-column>
      </el-table>
      <el-table ref="qyTable2" border :empty-text='empty' :data="tableData2" tooltip-effect="dark" style="width: 50%;float:left">
        <el-table-column prop="xianqu" label="县市区名" header-align="center"></el-table-column>
        <el-table-column prop="stnm" label="站名" header-align="center"></el-table-column>
        <el-table-column prop="xiangzhen" label="乡镇名" header-align="center"></el-table-column>
        <el-table-column prop="amount" label="累计雨量" header-align="center"></el-table-column>
      </el-table>
    </div>
  </el-col>
</template>
<script>
export default {
  name: "yqjb",
  data() {
    return {
      reachVal: "",
      tableData1: [],
      tableData2: [],
      empty: "正在读取数据，请稍等",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 3);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近六小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 6);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  methods: {
    doforTime(val) {
      var today = new Date(val);
      var yearNum = today.getFullYear();
      var monNum =
        today.getMonth() + 1 > 9
          ? today.getMonth() + 1
          : "0" + (today.getMonth() + 1);
      var dayNum =
        today.getDate() > 9 ? today.getDate() : "0" + today.getDate();
      var hourNum =
        today.getHours() > 9 ? today.getHours() : "0" + today.getHours();
      var finDate =
        yearNum +
        "-" +
        monNum +
        "-" +
        dayNum +
        " " +
        hourNum +
        ":" +
        "00" +
        ":" +
        "00";
      return finDate;
    },
    //点击查询
    handleReach(val) {
      console.log(val);
      var reachData = [];
      this.reachVal.forEach((val, index) => {
        reachData.push({
          time: val.valueOf()
        });
      });
      console.log(reachData);
      this.$$http("GET_MON_RAIN", null, {
        start: reachData[0].time,
        end: reachData[1].time
      }).then(data => {
        // console.log(data);
        if (data.obj && data.obj.length > 0) {
          this.doforTableDate(data.obj);
        } else {
          this.$message({
            message: "当前时段暂无数据！",
            type: "warning"
          });
          this.empty = "当前时段暂无数据！";
        }
      });
    },
    //点击导出
    handleUpload() {},
    //点击打印
    handlePrinte() {
      var newstr = document.getElementById("allTable").innerHTML;
      var oldstr = document.body.innerHTML;
      document.body.innerHTML = newstr;
      window.print();
      document.body.innerHTML = oldstr;
      // 重新加载页面，以刷新数据
      window.location.reload();
    },
    //数据处理
    doforTableDate(val) {
      var data = val;
      console.log(data);
      var data1 = data
        .filter(row => {
          return row && row.y == "1";
        })
        .sort(this.compare("x"));
      var data2 = data
        .filter(row => {
          return row && row.y == "2";
        })
        .sort(this.compare("x"));
      console.log(data1);
      console.log(data2);
      this.tableData1 = data1;
      this.tableData2 = data2;
    },
    //排序
    compare(property) {
      return function(obj1, obj2) {
        var value1 = obj1[property];
        var value2 = obj2[property];
        return value1 - value2; // 升序
      };
    }
  },
  mounted() {
    var today = new Date();
    var yearNum = today.getFullYear();
    var monNum = today.getMonth();
    var dayNum = today.getDate();
    var hourNum = today.getHours();
    // console.log(hourNum);
    this.reachVal = [
      new Date(yearNum, monNum, dayNum, "07"),
      new Date(yearNum, monNum, dayNum, "08")
    ];
    this.handleReach(this.reachVal);
  }
};
</script>
<style lang="scss">
.base-table {
  padding: 12px;
}
</style>